<script>
import XuanHeader from '@/components/headerfooter/XuanHeader.vue' // 页头
import XuanFooter from '@/components/headerfooter/XuanFooter.vue' // 页脚

export default {
  components: {
    XuanHeader, // 页头
    XuanFooter // 页脚
  },
  el: 'app',
  data() {
    return {
    }
  },
  watch: {
  },
  created() {
    // this.loadingMethod(0, true); // 全局进度条动画
  },
  mounted() {
  },
  methods: {

    /**
     * 全局进度条动画
     * 
     * @param {number} time 加载使用的时间（单位：毫秒）
     * @param {boolean} status 加载完成后的状态（true:成功。false:失败）
     */
    loadingMethod(time, status) {

      this.$Loading.start(); // 加载开始
      
      setTimeout(() => {
        if (status) {
          this.$Loading.finish(); // 加载完成
        } else {
          this.$Loading.error(); // 加载失败
        }
      }, time);

    },

  }
}
</script>


<template>
  <div class="vue">

    <!-- 页头 -->
    <div class="header">
      <XuanHeader />
    </div>

    <!-- 界面 -->
    <div class="interface">

      <!-- 路由跳转，无过渡动画 -->
      <!-- <router-view></router-view> -->

      <!-- 路由跳转，有过渡动画 -->
      <router-view v-slot="{ Component }">
        <!-- 页面淡入淡出动画 -->
        <transition name="fade" mode="out-in">
          <component :is="Component" />
        </transition>
         <!-- 全局进度条动画 -->
        {{ loadingMethod(0, true) }}
      </router-view>

    </div>

    <!-- 页脚 -->
    <div class="footer">
      <XuanFooter />
    </div>

    <!-- 返回顶部 -->
    <div>
      <el-backtop class="mouse" :right="40" :bottom="80" visibility-height="100" />
    </div>

  </div>
</template>


<style scoped lang="scss">
.vue {

  // 页头
  .header {}

  // 界面
  .interface {
    min-height: 100vh;
    padding-bottom: 100px;
    background-color: rgb(247, 249, 255);
  }

  // 页脚
  .footer {
  }

  // 返回顶部
  .mouse {
    z-index: 9999;
    border-radius: 50px;
  }

}
</style>
